<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/shoppingTrolley.css">
</head>
<body>
    <div class="head">
        <div class="top clearfix">
            <span>legochina.cn</span>
            <div class="topLink fr fs14 ">
              <span>欢迎光临</span>
              <a href="./homePage.html">乐购</a>
              <span>，请</span>
              <a href="./login.html">登录</a>
              <span>/</span>
              <a href="./register.html">注册</a>
          </div>
        </div>
        <div class="topBox">
            <div class="wrapper topPic clearfix">
                <img class="fl" src="./imgs/04-购物车_02.jpg" alt="">
                <div class="fr bar fs16">
                    <input type="text" class="search-box fl" placeholder="设计中的设计 原研哉">
                    <input type="button" class="search-btn fl ">
                </div>
            </div>
            <p class="wrapper fs20 .color_f">填写并核对订单信息</p>
        </div>
    </div>
    <div class="header container">
        <!-- 头部 -->
        <ul class="list_header">
          <li class="list_chk">
            <!-- <input type="checkbox" id="selall">  -->
            <div class="shop_info">
              <!-- 单个店铺的全选 -->
                <input type="checkbox" class="all_check ">    
              
            </div>
          </li>
          <li class="list_con">商品信息</li>
          <li class="list_info">商品参数</li>
          <li class="list_price">单价</li>
          <li class="list_amount">数量</li>
    
          <li class="list_sum">金额</li>
          <li class="list_op">操作</li>
        </ul>
        <!-- 第一个店铺 -->
        <div class="cartbox">
          <!-- 店铺信息 -->
         
          <!-- 订单主要区域 -->
          <div class="order_content">
            <ul class="order_lists mt10 clearfix">
              <li class="list_chk">
                <!-- 单个复选框 -->
                <input type="checkbox" class="son_check">           
              </li>
              <li class="list_con">
                <div class="list_img fl">
                  <a href="javascript:;">
                    <img src="./imgs/素材图片/书籍/23353342-1_l.jpg" alt="">
                  </a>
                </div>
                <div class="list_text fl">
                  <a href="#">从你的全世界路过</a>
                </div>
              </li>
              <li class="list_info">
                <p>规格：默认</p>
                <p>尺寸：16*16*3(cm)</p>
              </li>
              <li class="list_price">
                <!-- 单价 -->
                <p class="price">￥<span>41</span></p>
              </li>
              <!-- 数量  -->
              <li class="list_amount">
                <div class="amount_box">
                  <!-- 减 -->
                  <a class="reduce fl">-</a>
                  <input type="number" value="1" class="sum fl">
                  <!--  加 -->
                  <a class="plus fl">+</a>
                </div>
              </li>
              <li class="list_sum">
                <!-- 小计结果 -->
                <p class="sum_price">￥<span>41</span></p>
              </li>
              <li class="list_op">
                <p class="del">
                  <a  class="delbtn">移除商品</a>
                </p>
              </li>
            </ul>
            <ul class="order_lists mt10 clearfix">
                <li class="list_chk">
                  <!-- 单个复选框 -->
                  <input type="checkbox" class="son_check">           
                </li>
                <li class="list_con">
                  <div class="list_img fl">
                    <a href="javascript:;">
                      <img src="./imgs/素材图片/书籍/23418061-1_l.jpg" alt="">
                    </a>
                  </div>
                  <div class="list_text fl">
                    <a href="#">爱德华的奇妙之旅</a>
                  </div>
                </li>
                <li class="list_info">
                  <p>规格：默认</p>
                  <p>尺寸：16*16*3(cm)</p>
                </li>
                <li class="list_price">
                  <p class="price">￥<span>55</span></p>
                </li>
                <li class="list_amount">
                  <div class="amount_box">
                    <!-- 减 -->
                    <a class="reduce fl">-</a>
                    <input type="text" value="1" class="sum fl">
                    <!--  加 -->
                    <a class="plus fl">+</a>
                  </div>
                </li>
                <li class="list_sum">
                  <!-- 小计结果 -->
                  <p class="sum_price">￥<span>55</span></p>
                </li>
                <li class="list_op">
                  <p class="del">
                    <a  class="delbtn">移除商品</a>
                  </p>
                </li>
            </ul>
            <ul class="order_lists mt10 clearfix">
                <li class="list_chk">
                  <!-- 单个复选框 -->
                  <input type="checkbox" class="son_check">           
                </li>
                <li class="list_con">
                  <div class="list_img fl">
                    <a href="javascript:;">
                      <img src="./imgs/素材图片/书籍/21090357-1_l.jpg" alt="">
                    </a>
                  </div>
                  <div class="list_text fl">
                    <a href="#">百年孤独</a>
                  </div>
                </li>
                <li class="list_info">
                  <p>规格：默认</p>
                  <p>尺寸：16*16*3(cm)</p>
                </li>
                <li class="list_price">
                  <p class="price">￥<span>88</span></p>
                </li>
                <li class="list_amount">
                  <div class="amount_box">
                    <!-- 减 -->
                    <a class="reduce fl">-</a>
                    <input type="text" value="1" class="sum fl">
                    <!--  加 -->
                    <a class="plus fl">+</a>
                  </div>
                </li>
                <li class="list_sum">
                  <!-- 小计结果 -->
                  <p class="sum_price">￥<span>88</span></p>
                </li>
                <li class="list_op">
                  <p class="del">
                    <a  class="delbtn">移除商品</a>
                  </p>
                </li>
            </ul>
          </div>
        </div>
        <!-- 底部 -->
        <div class="btmbox wrapper">
            
            <!-- <input type="checkbox" class="all_check ml30">
            <span>全选</span>  -->
            <a class="delallsel">删除选中商品</a>
            <p class="fr">
              <span>已选择<strong class="cf40 amount">0</strong>件商品</span>
              <span>共计<strong class="cf40 totalprice">0.00</strong>元</span>
              <a href="#" class="settle">去结算</a>          
            </p>
    
    
        </div>
      </div>
      <div class="youLike wrapper">
        <h3>猜你喜欢</h3>
        <div class="ebook bt clearfix">
            <div class="commonBook">
                <p><img src="./imgs/素材图片/书籍/22935553-1_l.jpg" alt=""></p>
                <p><img src="./imgs/02-产品列表_03.jpg" alt=""></p>
                <p class="fs14 pl10">白夜行 东野圭吾</p>
                <p class="pl10"><img src="./imgs/02-产品列表_07.jpg" alt=""></p>
                <p class="pl10"><span class="color_r fs24">￥38</span> <span class="fs24 color_g">￥58</span></p>
            </div>
            <script>
                for (let i = 0; i < 4; i++) {
                    document.write(
                        ` <div class="ml37 commonBook">
                <p><img src="./imgs/素材图片/书籍/22935553-1_l.jpg" alt=""></p>
                <p><img src="./imgs/02-产品列表_03.jpg" alt=""></p>
                <p class="fs14 pl10">白夜行 东野圭吾</p>
                <p class="pl10"><img src="./imgs/02-产品列表_07.jpg" alt=""></p>
                <p class="pl10"><span class="color_r fs24">￥38</span> <span class="fs24 color_g">￥58</span></p>
            </div>
                        `
                    );
                }
            </script>
        </div>
      </div>



      <div class="wrapper bigImg">
        <img src="./imgs/11-会员中心（首页）_28.jpg" alt="">
    </div>

    <footer>
        <div class="footTop">
            <div class="wrapper">
                <div class="pics">
                    <img src="./imgs/222_11.png" alt="">
                    <img src="./imgs/222_13(1).png" alt="">
                    <img src="./imgs/222_15.png" alt="">
                    <img src="./imgs/222_17.png" alt="">
                </div>
            </div>
        </div>
        <div class="wrapper service clearfix">
            <ul class="fl">
                <li class="title"><a href="#"> 购物指南</a></li>
                <li><a href="#"> 购物流程</a></li>
                <li><a href="#"> 发票制度</a></li>
                <li><a href="#"> 账户管理</a></li>
                <li><a href="#"> 会员优惠</a></li>
            </ul>
            <ul class="fl">
                <li class="title"><a href="#"> 支付方式</a></li>
                <li><a href="#"> 货到付款</a></li>
                <li><a href="#"> 网上支付</a></li>
                <li><a href="#"> 礼品卡支付</a></li>
                <li><a href="#"> 银行转帐</a></li>

            </ul>
            <ul class="fl">
                <li class="title"><a href="#"> 订单服务</a></li>
                <li><a href="#"> 订单配送查询</a></li>
                <li><a href="#"> 订单状态说明</a></li>
                <li><a href="#"> 自助取消订单</a></li>
                <li><a href="#"> 自助修改订单</a></li>
            </ul>
            <ul class="fl">
                <li class="title"><a href="#"> 退换货</a></li>
                <li><a href="#"> 退换货政策</a></li>
                <li><a href="#"> 自助申请退换货</a></li>
                <li><a href="#"> 退换货进度查询</a></li>
                <li><a href="#"> 退款方式和时间</a></li>
            </ul>
            <ul class="fl">
                <li class="title"><a href="#"> 商家服务</a></li>
                <li><a href="#"> 商家中心</a></li>
                <li><a href="#"> 运营服务</a></li>
                <li><a href="#"> 加入尾品汇</a></li>
            </ul>
            <a href="homePage.html" class="fr">
                <img src="./imgs/logo_00.png" alt="">
            </a>
        </div>
        <div class="wrapper footBottom">
            <div class="fbText">
                <p>
                    <a href="#">公司简介</a> |
                    <a href="#">Investor Relations</a> |
                    <a href="#">网站联盟</a> |
                    <a href="#"> 乐购招商 </a>|
                    <a href="#">机构销售 </a>|
                    <a href="#">手机乐购 </a>|
                    <a href="#">官方Blog </a>|
                    <a href="#">热词搜索</a>
                </p>
                <p>
                    Copyright (C) 乐购网 2004-2016, All Rights Reserved
                </p>
            </div>
        </div>
    </footer>

    <script src="./lib/jquery.min.js"></script>
    <script src="./js/shoppingTrolley.js"></script>
</body>
</html>